@(userList: java.util.List[models.User], groupList: java.util.List[models.Group], mapConv: java.util.Map[String, java.util.Map[String, models.Conversation]], visitObject: models.VisitObject, visitName: String, title: String)

@import views.html.common

@listUserChat = {
        		<ul class="nav">
        			@for(user <- userList){
        				<li>
        					<a href="javascript:chatwith('@user.getId()', 'user', '@user.getFullName()')">@user.getFullName()</a>
        				</li>
        			}
        		</ul>
        	}
@listGroupChat = {
        		<ul class="nav">
        			@for(group <- groupList){
        				<li>
        					<a href="javascript:chatwith('@group.getId()', 'group', '@group.getName()')">@group.getName()</a>
        				</li>
        			}
        		</ul>
        	}
        	
@listChat = {
    <div id="user-list">
    	<div class="panel-group" id="accordion">
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
		                	<span class="glyphicon glyphicon-folder-close"></span>Users
	                	</a>
		            </h4>
		        </div>
		        <div id="collapseOne" class="panel-collapse collapse">
					<div class="list-content">
						@listUserChat
					</div>
		        </div>
		    </div>
		    <div class="panel panel-default">
		        <div class="panel-heading">
		            <h4 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" href="#collapseFour">
		                	<span class="glyphicon glyphicon-heart"></span>Groups
		                </a>
		            </h4>
		        </div>
		        <div id="collapseFour" class="panel-collapse collapse">
		            <div class="list-content">
						@listGroupChat
					</div>
		        </div>
		    </div>
		</div>
    </div>
}
@chat(title, listChat) {
<div id="conversation-header">
	<div class="conv-name">
		<div class="conv-text">
			<span id="conv-title" class="conv-title">@visitName</span>
		</div>
		
		<div style="overflow: auto; width: 100%; height: 30px;" id="debug"></div>
	</div>
</div>

<div id="conversation-content">
	<div id="conversation-cover">
		<table width="100%">
			<tr>
				<td valign="bottom">
					<ul id="messages" class="chat">
						@common.line(mapConv)
						<!-- // All messages here!!! -->
					</ul>
				</td>
			</tr>
		</table>
	</div>
</div>
<div id="conversation-form">
	<form role="form" autocomplete="off" onsubmit="return chat();" id="chat-form" accept-charset="UTF-8">
		<div class="entry input-group col-xs-12">
			<input type="hidden" id="cht-userId" value="@session.get("userId")" />
			<input type="hidden" id="cht-userName" value="@session.get("userName")" />
			<input type="hidden" id="cht-userFullName" value="@session.get("userFullName")" />
			<input type="hidden" id="cht-destId" value="@visitObject.getVisitId()" />
			<input type="hidden" id="cht-destType" value="@visitObject.getVisitType()" />
			<input class="form-control" name="input-msg" id="cht-message" type="text" placeholder="Type your message here... " />
			<span class="input-group-btn">
				<button class="btn btn-warning btn-add" type="button">
					<span class="glyphicon glyphicon-send"></span> &nbsp;&nbsp;SEND
				</button>
			</span>
		</div>
	</form>
</div>
<script src="http://cdn.sockjs.org/sockjs-0.3.min.js" type="text/javascript"></script>
<script src="@routes.Assets.at("javascripts/stomp.js")" type="text/javascript" charset="utf-8"></script>
<!-- <script src="@routes.Assets.at("javascripts/multiplex_client.js")"></script> -->
<script src="@routes.Assets.at("javascripts/chat.js")" type="text/javascript" charset="utf-8"></script>
}
